<template>
	<view class="pages">
		<!-- 退款拒绝 -->
		<view class="refuse">
			<view class="tits"><text class="iconfont icon-jinggao"></text>退款被拒绝建议修改申请</view>
			<view class="cont">
				若申请被拒绝，您可以尝试修改退款申请或联系卖家，若6天15时31分10秒内申请未处理，退款申请将达成并退款至您的微信零钱或余额中
			</view>
			<view class="btn">联系买家</view>
		</view>
		<!-- 退款信息 -->
		<view class="refInfo">
			<view class="title">退款信息</view>
			<view class="goods">
				<view class="img"><image src="../../static/signBg.jpg" mode=""></image></view>
				<view class="cont">
					<view class="tit">深红色限量款红色套装礼盒秋冬商品标题名称限量款</view>
					<view class="ftit">红色 L码</view>
					<view class="flex">
						<view class="price">￥128.00</view>
						<view class="num">x 1</view>
					</view>
				</view>
			</view>
			<!-- 退款详情 -->
			<view class="detail">
				<view class="list" v-for="(list,index) in listData" :key="index">
					<view class="info">{{list.info}} :</view>
					<view class="note">{{list.note}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data(){
			return{
				listData:[
					{id:0,info:'退款原因',note:'不喜欢/不想要'},
					{id:1,info:'退款金额',note:'￥128.00'},
					{id:2,info:'申请时间',note:'2020-08-21 12:30'},
					{id:3,info:'退款编号',note:'26587169784236789874'}
				]
			}
		}
	}
</script>
<style lang="scss">
	.pages{background:#fff;margin-top: 1px;}
	// 拒绝退款
	.refuse{
		padding: 30rpx;
		.tits{font-size: 32rpx;font-weight: bold;margin-top:10rpx;text{margin-right: 10rpx;color:#F04447;font-size: 35rpx;}}
		.cont{margin:50rpx 0;font-size:28rpx;line-height:40rpx;}
		.btn{width: 200rpx;height:55rpx;line-height:55rpx;border: 1px solid #F04447;text-align: center;
			color:#F04447;font-size:28rpx;margin: 0 auto;}
	}
	// 退款信息
	.refInfo{
		border-top:20rpx solid #eee;padding: 20rpx 0;
		.title{padding: 0 30rpx;font-size:30rpx;font-weight: bold;height:70rpx;line-height:70rpx;}
		// 商品信息
		.goods{
			display: flex;margin-top: 1px;padding:30rpx;
			.img{width:220rpx;height:220rpx;overflow: hidden;border-radius: 6rpx;image{width: 100%;height: 100%;}}
			.cont{margin-left: 20rpx;flex: 1;}
			.tit{font-size: 30rpx;color:#555;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;
				-webkit-box-orient:vertical;-webkit-line-clamp:2
				}
			.ftit{font-size: 26rpx;color:#999;margin-top:15rpx;}
			.flex{margin-top:30rpx;align-items: center;
				.price{flex: 1;color:#f04447;font-size: 32rpx;font-weight: bold;}
				.num{color: #999;}
			}
		}
		// 退款详情
		.detail{
			padding: 30rpx;border-top: 1px dashed #eee;
			.list{display: flex;font-size:25
			rpx;color:#999;line-height:50rpx;}
			.info{width:130rpx;}
		}
	}
	.btns{background:#f04447;position: fixed;bottom: 0;left: 0;right: 0;color:#fff;text-align: center;
		height: 100rpx;line-height: 100rpx;font-size: 30rpx;}
	.btns text{margin-right: 10rpx;font-size:32rpx;}
</style>
